<template>
  <div>
	<div class="content ">
	  <div class="con-left " v-for="(item,index) of booksList" :key='index'>
		<router-link :to="{path:'/hotchapter',query:{title:item.title}}">
			<div class="con-le-top border-bottom" >
			  <div class="image"><img :src="item.img_url"></div>
			  <div class="TW">
				<span>{{item.title}}</span>
				<span>{{item.author}}</span>
			  </div>
			  <div class="Con-content" id="Con-content">
				{{item.des}}
			  </div>
			</div>
		</router-link>
	  </div>
	</div>
  </div>
</template>

<script>
import axios from 'axios'
export default{
  name:"Content",
  data (){
	return {
	  booksList:[]
	}
  },
  methods:{
	getBooksInfo(){
		axios.post(('http://localhost:3000/api/user/allmingzhubooksinfo'),{
		},{}).then((response)=>{
			// console.log(response.data)
			var d = []
			for(var i = 0;i < 10;i++){
				var dat = JSON.stringify(response.data[i])
				var dat2 = JSON.parse(dat)
				d.push(dat2)
			}
			var c = this.booksList = d
			// console.log(c)
		})
	}
  },
  mounted (){
	this.getBooksInfo()
  }
}


</script>
<!-- <script>
  var booksContent = document.getElementById('Con-content');
  var demoHtml = booksContent.innerHTML.slice(0,105)+'...';
  booksContent.innerHTML = demoHtml;
</script> -->

<style scoped>
img{
  height: 100px;
  width: 80px;
}
.content{
  height: 120px;
  width: 100%;
  margin: 0 3%;
}
.con-left{
  height: 120px;
  width: 30%;
  padding: 0 10px;
  float: left;
}
./* con-left:hover{
	background: lightgoldenrodyellow;
} */
.con-le-top{
  height: 110px;
  width: 100%;
  margin-bottom: 10px;
}
.image{
  height: 100px;
  width: 80px;
  float: left;
}
.TW{
  height: 15%;
  width: 75%;
  float: left;
}
.TW>span:first-child{
  float: left;
  padding-left: 20px;
  font-size: 18px;
  font-weight: bold;
  color: #000000;
}
.TW>span:last-child{
  float: right;
  font-size: 16px;
  color: #000000;
}
.Con-content{
  height: 59%;
  width: 75%;
  float: left;
  margin-left: 15px;
  font-size: 13px;
  color: #000000;
  padding-top: 10px;
  letter-spacing: 3px;
  line-height: 24px;
  /* 多行限制字数  显示省略号 */
  overflow: hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}

</style>
